var ElectroplateOutHandover = function () {
  var template = /* html */ `
    <div class="electroplate-out-handover">
      <el-form-item label="交接电镀设置" v-if="colorList!==null">
        <table v-if="colorList.length>0" class="out-business-order-table" cellspacing="0" cellpadding="0">
          <colgroup>
            <col>
            <col width="120px">
            <col width="120px">
          </colgroup>
          <thead>
            <tr>
              <th>颜色</th>
              <th>合格数</th>
              <th>不合格数</th>
            </tr>
          </thead>
          <tbody>
            <template v-for="(color,index) in colorList">
              <tr :key="'color_'+index">
                <td colspan="3">
                  <span style="margin-right:15px">电镀物料:{{color.materialType}}</span>
                  <span>电镀色类型:{{color.electroplateType}}</span>
                </td>
              </tr>
              <template v-for="(materialColor,colorIndex) in color.materialColorList">
                <tr :key="'materialColor_'+index+'_'+colorIndex">
                  <td style="padding-left:15px">
                    <el-checkbox v-model="materialColor.checked" @change="eleColorChange(materialColor,'checked')">
                      {{materialColor.color}}
                    </el-checkbox>
                  </td>
                  <td>
                    <el-input-number v-model="materialColor.count" :min="0" :max="materialColor.maxCount" :precision="0" size="small" class="table-input" :controls="false" 
                      placeholder="合格数" :disabled="!materialColor.checked" @change="eleColorChange(materialColor,'count')"></el-input-number>
                  </td>
                  <td>
                    <el-input-number v-model="materialColor.noCount" :min="0" :max="materialColor.maxCount" :precision="0" size="small" class="table-input" :controls="false" 
                      placeholder="不合格数" :disabled="!materialColor.checked" @change="eleColorChange(materialColor,'noCount')"></el-input-number>
                  </td>
                </tr>
              </template>
            </template>
          </tbody>
        </table>
        <span v-else>没有电镀物料可以交接</span>
      </el-form-item>

      <el-form-item label="非电镀设置" v-if="colorList!==null&&materialDetailList.length>0">
        <material-out-handover ref="materialOrder" :handover="handover" :detail-list="materialDetailList"  @select-group="selectGroup">
        </material-out-handover>
      </el-form-item>
    </div>
  `;

  return {
    props: {
      handover: {
        type: Object,
        required: true
      },
      detailList: {
        type: Array,
        required: true
      }
    },

    watch: {
      detailList: function () {
        this.setEleDetailList();
      }
    },

    data: function () {
      return {
        colorList: null,
        materialDetailList:[]
      };
    },

    created: function () {
      this.setEleDetailList();
    },

    methods: {
      setEleDetailList: function () {
        var detailList = this.detailList;
        var eleDetailList = [],materialDetailList = [];
        for (var i = 0; i < detailList.length; i++) {
          var detail = detailList[i];
          var rowIndex = detail.rowIndex;
          if (rowIndex === '-1') {
            eleDetailList.push(detail);
          } else {
            materialDetailList.push(detail);
          }
        }
        this.materialDetailList = materialDetailList;

        var detailGroup = _.groupBy(eleDetailList, function (obj) {
          return `${obj.materialType}_${obj.materialCode}`;
        });
        var colorList = [];
        for (var key in detailGroup) {
          var details = detailGroup[key];
          var electroplateType = details[0].additionalMaterialType;
          var materialType = details[0].materialType;
          var materialCode = details[0].materialCode;

          var materialColorList = [];
          for (var i = 0; i < details.length; i++) {
            var detail = details[i];
            var color = {
              rowIndex: detail.rowIndex,
              color: detail.additionalColor,
              count: 0,
              noCount: 0,
              maxCount: detail.count,
              checked: false,
              lineNo: detail.additionalRowIndex
            };
            materialColorList.push(color);
          }

          colorList.push({
            materialCode: materialCode,
            materialType: materialType,
            electroplateType: electroplateType,
            materialColorList: materialColorList
          });
        }
        this.colorList = colorList;
      },

      eleColorChange: function (materialColor, field) {
        var colorList = this.colorList;
        var lineNo = materialColor.lineNo;
        var value = materialColor[field];
        for (var i = 0; i < colorList.length; i++) {
          var color = colorList[i];
          var materialColorList = color.materialColorList;
          for (var j = 0; j < materialColorList.length; j++) {
            var obj = materialColorList[j];
            if (obj.lineNo !== lineNo) {
              continue;
            }
            obj[field] = value;
          }
        }

        if (this.materialDetailList.length > 0) {
          this.$refs['materialOrder'].toSelectGroup(lineNo, field, value);
        }
      },

      getPostData: function () {
        var colorList = this.colorList;
        var colors = [];
        for (var i = 0; i < colorList.length; i++) {
          var color = colorList[i];
          var materialColorList = color.materialColorList;
          for (var j = 0; j < materialColorList.length; j++) {
            var materialColor = materialColorList[j];
            if (!materialColor.checked) {
              continue;
            }

            if (!this.checkValid(materialColor)) {
              return null;
            }

            var obj = {
              materialType: color.materialType,
              materialCode: color.materialCode,
              rowIndex: materialColor.rowIndex,
              count: materialColor.count,
              noCount: materialColor.noCount,
              color: materialColor.color,
              additionalMaterialType: color.electroplateType,
              additionalRowIndex: materialColor.lineNo,
              typeId: materialColor.lineNo
            };
            colors.push(obj);
          }
        }

        if (colors.length === 0) {
          this.$alert(i18n.getMsg('orderCirculation.outHandover.ele-colorList'));
          return null;
        }

        if (this.materialDetailList.length > 0) {
          var materialColors = this.$refs['materialOrder'].getPostData();
          if (materialColors !== null) {
            colors.pushArray(materialColors);
          }
        }

        return colors;
      },

      checkValid: function (materialColor) {
        var fields = ['count', 'noCount'];
        var nullField = CheckVaildUtil.checkNullField(fields, materialColor);
        if (nullField !== '') {
          var msg = i18n.getMsg(`orderCirculation.outHandover.ele-${nullField}`);
          this.$alert(msg, '信息');
          return false;
        }

        if (materialColor.count + materialColor.noCount <= 0) {
          this.$alert(i18n.getMsg(`orderCirculation.outHandover.ele-countZero`), '信息');
          return false;
        }
        return true;
      },
      selectGroup:function(color, detailColor, field){
        if (!color.hasCheck) {
          return;
        }

        var value = color[field];
        var lineNo = color.rowIndex;
        var colorList = this.colorList;
        for (var i = 0; i < colorList.length; i++) {
          var eleColorObj = colorList[i];
          var materialColorList = eleColorObj.materialColorList;
          for (var j = 0; j < materialColorList.length; j++) {
            var materialColor = materialColorList[j];
            if (materialColor.lineNo === lineNo) {
              materialColor[field] = value;
            }
          }
        }
      }
    },

    components: {
      MaterialOutHandover: MaterialOutHandover(false)
    },

    template: template
  };
}();
